<template>
    <v-app class="split-bg">
        <v-content>
            <v-container fluid fill-height>
                <v-layout align-center justify-center>
                    <v-flex xs12 sm8 md4 lg4>
                        <v-card class="elevation-1 pa-3">
                            <v-card-text>
                                <div class="layout column align-center">

                                    <h1 class="flex my-4 primary--text">
                                        AIRSHOP后台管理
                                    </h1>
                                </div>
                                <v-form v-model="valid" ref="loginForm">
                                    <v-text-field
                                            append-icon="person"
                                            name="login"
                                            label="Login"
                                            type="text"
                                            v-model="model.username"
                                            :rules="nameRules"
                                            @keyup.enter="login"
                                    ></v-text-field>
                                    <v-text-field
                                            append-icon="lock"
                                            name="password"
                                            label="Password"
                                            id="password"
                                            type="password"
                                            v-model="model.password"
                                            :rules="passRules"
                                            @keyup.enter="login"
                                    ></v-text-field>
                                </v-form>
                            </v-card-text>
                            <div class="login-btn">
                                <v-btn icon>
                                    <v-icon color="blue">fa fa-facebook-square fa-lg</v-icon>
                                </v-btn>
                                <v-btn icon>
                                    <v-icon color="red">fa fa-google fa-lg</v-icon>
                                </v-btn>
                                <v-btn icon>
                                    <v-icon color="light-blue">fa fa-twitter fa-lg</v-icon>
                                </v-btn>
                                <v-spacer></v-spacer>
                                <v-btn block color="primary" @click="login" :loading="loading">Login</v-btn>
                            </div>
                        </v-card>
                    </v-flex>
                </v-layout>
            </v-container>
        </v-content>
    </v-app>
</template>

<script>
    import Qs from 'qs'
  export default {
        data: () => ({
            loading: false,
            valid: false,
            model: {
                username: "lzx1024",
                password: "123456"
            },
            nameRules: [
                v => !!v || '用户名不能为空',
                v => v.length <= 10 || '用户名不能超过十个字符',
            ],
            passRules: [
                v => !!v || '密码不能为空',
                v => 6<=v.length&&v.length<=16 || '密码不能低于6位且不能超过16位'
            ]
        }),
        methods: {
            login() {
                if (!this.$refs.loginForm.validate) {
                    this.loading = false;
                    this.$message.error("请先填写正确的用户名和密码")
                }
                // 模拟登录
                /* this.loading = true;
                 setTimeout(() => this.$router.push("/index/dashboard"), 400);*/
                this.$http.post("/admin/login", Qs.stringify(this.model))
                    .then(res => {
                        console.log(res)
                        if(res.data.code !==200){
                            this.$message.error(res.data.msg)
                        }else {
                            window.localStorage.setItem('token', 'pass')
                            window.localStorage.setItem("admin", JSON.stringify(res.data.data))
                            this.$store.commit("setUser",res.data.data)
                            this.loading = true;
                            this.$router.push("/index/dashboard");
                        }
                    }).catch(err=>{
                    console.log(err)
                    }
                )
            }
        }
    };
</script>
<style scoped lang="css">
    .split-bg {
        height: 50%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        z-index: 0;
        background-color: #3F51B5;
    }
</style>
